<template>
  <div class="detail">
    <div class="content">
      <div class="item">
        <Descriptions title="预警信息" :items="items_base"></Descriptions>
      </div>
      <div class="item">
        <Descriptions title="预警对象详情" :items="items_type"></Descriptions>
      </div>
      <div class="item" v-if="modelType == 5">
        <DetailTable :data="data.warningHighIncidenceDetailsVo"></DetailTable>
      </div>
      <div class="item">
        <div class="title">
          跟进情况
          <el-tag type="info">跟进状态：{{ data.statusName }}</el-tag>
        </div>
        <br />
        <div class="item" v-if="data_follow?.length">
          <Table :columns="columns_follow" :data="data_follow"></Table>
        </div>
      </div>
    </div>
    <div class="btns">
      <div v-if="type == 'follow'">
        <el-button type="primary" @click="click('转任务')" disabled
          >转任务</el-button
        >
        <el-button type="primary" @click="click('跟进')">跟进</el-button>
        <el-button type="primary" @click="click('关闭预警')"
          >关闭预警</el-button
        >
        <el-button type="primary" @click="click('解除预警')"
          >解除预警</el-button
        >
      </div>
      <div class="back">
        <el-button @click="$router.go(-1)">返回</el-button>
      </div>
    </div>
    <DetailDialog
      :visible="visible"
      @close="visible = false"
      @click="click"
    ></DetailDialog>
  </div>
</template>

<script>
import Descriptions from '@/views/components/Descriptions'
import Table from '@/views/components/Table'
import { detail } from '@/api/handle'
import { followUpSubmit } from './submit'
import { setBase, setTypes } from './detailData'
import DetailDialog from './detailDialog.vue'
import DetailTable from './detailTable.vue'
export default {
  name: 'pageDetail',
  components: {
    Descriptions,
    DetailDialog,
    Table,
    DetailTable
  },
  data () {
    return {
      visible: false,
      data: {},
      type: '',
      modelType: '',
      warningCode: '',
      items_base: [],
      items_type: [],
      columns_follow: [
        { id: 'userName', label: '跟进人' },
        { id: 'deptName', label: '跟进人所在部门' },
        { id: 'content', label: '跟进内容' },
        { id: 'followUpTime', label: '跟进时间' }
      ],
      data_follow: [],
      fields: [
        'warningDomesticViolenceDetailVo',
        'warningEnterpriseDebtDetailsVo',
        'warningEnterpriseSafeProductionDetailsVo',
        'warningGroupHouseDetailsVo',
        'warningHighIncidenceDetailsVo'
      ],
      row: {}
    }
  },
  created () {
    this.type = this.$route.query.type
    this.modelType = this.$route.query.modelType
    this.warningCode = this.$route.query.warningCode
    this.detail()
    this.setBtns()
  },
  methods: {
    setBtns () {
      const flag = this.$route.path == '/warning/query'
      if (flag) {
        this.type = ''
      }
    },
    detail () {
      detail({ warningCode: this.warningCode }).then((res) => {
        if (!res.success) return
        let data = res.data
        if (data.followList) {
          this.data_follow = data.followList
          data.followList.map((i) => {
            i.followUpTime = i.followUpTime.split(' ')[0]
          })
        }
        data = this.setEmpt(res.data)
        this.data = data
        this.items_base = setBase(data)

        let item = {}
        switch (this.modelType) {
          case '1':
            item = this.setEmpt(data.warningDomesticViolenceDetailVo)
            break
          case '2':
            item = this.setEmpt(data.warningGroupHouseDetailsVo)
            break
          case '3':
            item = this.setEmpt(data.warningEnterpriseDebtDetailsVo)
            break
          case '4':
            item = this.setEmpt(data.warningEnterpriseSafeProductionDetailsVo)
            break
          case '5':
            item = this.setEmpt(data.warningHighIncidenceDetailsVo)
            break
        }
        this.items_type = setTypes(item, this.modelType)
      })
    },
    setEmpt (data) {
      for (const key in data) {
        if (!data[key]) {
          data[key] = '-'
        }
      }
      return data
    },
    click (key) {
      const row = this.data
      if (typeof key === 'object') {
        row.content = key.content
        row.followUpTime = key.followUpTime
        key = key.key
      }
      this.row = row

      switch (key) {
        case '转任务':
          break
        case '跟进':
          this.visible = true
          break
        case '确认':
          followUpSubmit.call(this, 0)
          break
        case '确认并解除预警':
          followUpSubmit.call(this, 2)
          break
        case '关闭预警':
          followUpSubmit.call(this, 1)
          break
        case '解除预警':
          followUpSubmit.call(this, 2)
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  height: 100%;
  overflow: auto;
  padding-bottom: 40px;
  .content {
    .item {
      margin-bottom: 40px;
      .title {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
  .btns {
    display: flex;
    justify-content: end;
    position: fixed;
    bottom: 0;
    width: 100vw;
    right: 0;
    padding: 15px 0;
    padding-right: 50px;
    background: #fff;
    box-shadow: 0 -2px 12px 0 rgb(0 0 0 / 6%);
    z-index: 1;
    .back {
      margin-left: 8px;
    }
  }
}
</style>
